import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';
import CommonStyles from '../commonStyles';

export default class extends Component {
    //初始值
    state = {
        arrowIcon: require('../../../images/icon_arrow_right.png'),
        linkList: [
            {
                title: '昵称',
                url: 'editNickname'
            },
            {
                title: '支付宝绑定',
                url: 'bindAliPay'
            },
            {
                title: '微信绑定',
                url: 'bindWechat'
            },
            {
                title: '修改密码',
                url: 'editPassword'
            },
            {
                title: '清除缓存',
                url: 'clearMemory'
            }
        ]
    };

    clearMemory = () => {
        this.props.showToast('清除成功');
    };

    createNav = (list) => {
        const {arrowIcon} = this.state;
        const {navigation, bindWechat} = this.props;
        return list.map((item, index) =>
            <TouchableOpacity
                key={item.title}
                onPress={() => {
                    if (item.url) {
                        if (item.url === 'bindWechat') {
                            bindWechat();
                        } else if (item.url === 'clearMemory') {
                            this.clearMemory();
                        } else {
                            navigation.navigate(item.url);
                        }
                    }
                }}>
                <View style={[CommonStyles.item, index === list.length - 1 ? {borderBottomWidth: 0} : {}]}>
                    <Text style={CommonStyles.title}>{item.title}</Text>
                    <Image source={arrowIcon} style={CommonStyles.arrow}/>
                </View>
            </TouchableOpacity>
        )
    };

    render() {
        const {linkList} = this.state;
        const {loginOut} = this.props;
        return (
            <View style={CommonStyles.container}>
                <View style={CommonStyles.list}>
                    {this.createNav(linkList)}
                </View>
                <TouchableOpacity onPress={loginOut}>
                    <View style={styles.btnWrap}>
                        <Text style={styles.btnText}>退出登录</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    list: {
        backgroundColor: '#fff',
        paddingLeft: 12
    },
    title: {
        fontSize: 13,
        color: '#1b1b1b'
    },
    btnWrap: {
        height: 40,
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 12,
        backgroundColor: '#fff'
    },
    btnText: {
        fontSize: 13,
        color: '#f84056'
    }
});
